import React, { Component } from 'react';
import { routerRedux, Route, Switch, Link, Redirect } from 'dva/router';

import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
  Button,
  Menu,
  Dropdown,
  Icon,
  Row,
  Col,
  Input,
  InputNumber,
  Steps,
  Card,
  Popover,
  Badge,
  Table,
  Tooltip,
  Divider,
  Checkbox,
  Modal,
  Radio,
  Select,
  message,
  Timeline,
  Collapse,
  Form,
  Upload,
  Spin,
  Tag,
} from 'antd';
import { Radar, ChartCard, Bar } from '../../../components/Charts';
import classNames from 'classnames';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import DescriptionList from '../../../components/DescriptionList';
import styles from './style.less';
import { create } from 'domain';
import querystring from 'querystring';

import { getRoutes } from '../../../utils/utils';

const Panel = Collapse.Panel;
const { Step } = Steps;
const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const Option = Select.Option;

export let profileState = false;

// @connect(({ pendingTask }) => ({
//   pendingTask,
// }))
@Form.create()
export default class SystemForm extends Component {
  state = {
    id: '',
    stateStructure: '',
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      id: params.id,
      stateStructure: params.stateStructure,
    });
    // dispatch({
    //   type: 'pendingTask/fetchApplyProfile',
    //   payload: {
    //     id: params.id,
    //   },
    // });
  }
  getCurrentStep() {
    const { location } = this.props;
    const { pathname } = location;
    const pathList = pathname.split('/');
    switch (pathList[pathList.length - 1]) {
      case 'customer':
        return 0;
      //   case 'business': return 1;
      case 'credits':
        return 1;
      case 'pay':
        return 2;
      default:
        return 0;
    }
  }
  render() {
    const { stepDirection } = this.state;
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { match, routerData, location } = this.props;
    const routes = getRoutes(match.path, routerData);
    const { pathname, params, search } = location;

    return (
      <PageHeaderLayout title="添加组织">
        <Card>
          <Col span={24}>
            <Steps current={this.getCurrentStep()} className={styles.steps}>
              <Step title="基本信息" />
              {/* <Step title="收费信息" /> */}
              <Step title="代理权限" />
              <Step title="完成" />
            </Steps>
            <Switch>
              {routes.map(item => (
                <Route
                  key={item.key}
                  path={item.path}
                  component={item.component}
                  exact={item.exact}
                />
              ))}
              {this.state.stateStructure == 7 ? (
                <Redirect
                  exact
                  from="/system/system-form"
                  to={`/system/system-form/customer?stateStructure=${
                    this.state.stateStructure
                  }&type=${1}`}
                />
              ) : null}
              {this.state.stateStructure == 6 && this.state.id ? (
                <Redirect
                  exact
                  from="/system/system-form"
                  // to={`/system/system-form/customer?type=${1}`}
                  to={`/system/system-form/customer?id=${this.state.id}&stateStructure=${
                    this.state.stateStructure
                  }&type=${1}`}
                />
              ) : null}
            </Switch>
          </Col>
        </Card>
      </PageHeaderLayout>
    );
  }
}
